<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筋头云导航栏</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            position: relative;
            width: 100%;
            height: 50px;
            background-color: black;
        }
        
        ul {
            position: absolute;
            list-style-type: none;
        }
        
        li {
            float: left;
            font: 15px '仿宋';
            padding-left: 10px;
            padding-right: 10px;
            line-height: 50px;
        }
        
        a {
            color: white;
            text-decoration: none;
        }
        
        #cloud {
            position: absolute;
            width: 80px;
            height: 50px;
            left: 0;
            top: 0;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="c_nav">
        <span id="cloud"></span>
        <ul>
            <li class="current"><a href="#">首页新闻</a></li>
            <li><a href="#">师资力量</a></li>
            <li><a href="#">活动策划</a></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">招聘信息</a></li>
            <li><a href="#">公司简历</a></li>
            <li><a href="#">我是佩奇</a></li>
            <li><a href="#">我是佩奇</a></li>
        </ul>
    </div>

    <script>
        window.onload = function() {
            function animate(ele, target, callback) {
                clearInterval(ele.timer)
                ele.timer = setInterval(function() {
                    var step = (target - ele.offsetLeft) / 10
                    step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    if (ele.offsetLeft == target) {
                        clearInterval(ele.timer)
                        if (callback) {
                            callback()
                        }
                    }
                    ele.style.left = ele.offsetLeft + step + 'px'
                }, 15)
            }

            var c_nav = document.querySelector('#c_nav')
            var cloud = document.getElementById('cloud')
            var lis = c_nav.querySelectorAll('li')
            var current = 0
            for (var i = 0; i < lis.length; i++) {
                lis[i].addEventListener('mouseenter', function() {
                    animate(cloud, this.offsetLeft)
                });

                lis[i].addEventListener('mouseleave', function() {
                    animate(cloud, current)
                });

                lis[i].addEventListener('click', function() {
                    current = this.offsetLeft
                });
            }
        }
    </script>
</body>

</html>